<%@page import="com.lyf.util.DateUtil"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
	<title>CRM-contact-mapping</title>
	<meta charset="UTF-8">
	<%@ include file="../include/head.jsp" %>
	<style type="text/css">
		table.mapping {
		    font-size: 12px;
		    width: 100%;
		}
		table.mapping th {
		    background-color: #EFEFEF;
		    border-bottom: 1px solid #DCDCDC;
		    padding: 5px 5px 5px 10px;
		}
		
		table.mapping td {
		    border-bottom: 1px solid #EDEDED;
		    padding: 5px 5px 5px 10px;
		}
	</style>
</head>

<body class="crm">
	
<jsp:include page="../include/top.jsp">
	<jsp:param value="contact" name="tag"/>
</jsp:include>


<div class="container-fluid">
	<div class="row-fluid">
		<div class="row-fluid">
		<div class="span8" style="margin-left:30px;">
		<div class="well screen">
		<div class="page-header header"> 接下来：匹配您的数据 </div>
		<div id="parties_loading" class="live_search_spinner" behavior="spinner">
			<div class="liner">
			<h3>处理中</h3>
			<img alt="WorkXP" src="${basePath }/img/indicator.gif">
			</div>
		</div>
		<div id="main" class="main">
			<div id="notice">我们发现了
				<span id="import_size" data-size="${mount }">${mount }</span>行数据
			</div>
			<div>
				<h4>现在帮助我们将您的数据与我们字段匹配</h4>
				<p>请您看下面表格，将要导入的数据与我们字段进行匹配，多看几条记录，确定匹配正确后再进行导入。</p>
			</div>
			<form id="import_form" class="edit_contact_import" method="post" action="${basePath }/contact/importContact" accept-charset="UTF-8">
				<div style="margin:0;padding:0;display:inline">
					<input type="hidden" value="${p }" name="p" id="row">
					<input type="hidden" name="from" value="${param.from }"/>
				</div>
				<table class="mapping">
				<tbody>
					<tr class="well" style="height:50px;">
						<th style="width:160px">字段</th>
						<th>您的数据 ${fn:length(strs) }
							<span class="pull-right">
								查看例子：
								<c:if test="${param.from == 'csv' }">
									<a href="${basePath}/contact/mapping?from=csv&p=${pager.nowPageNum - 1}">前一个</a>
									|
									<a href="${basePath}/contact/mapping?from=csv&p=${pager.nowPageNum + 1}">下一个</a>
								</c:if>
								<c:if test="${param.from == 'xls' }">
									<a href="${basePath}/contact/mapping?from=xls&p=${pager.nowPageNum - 1}">前一个</a>
									|
									<a href="${basePath}/contact/mapping?from=xls&p=${pager.nowPageNum + 1}">下一个</a>
								</c:if>
								
							</span>
						</th>
					</tr>
					<c:forEach items="${strs }" var="str">
					<tr>
						<td>
						<select id="mapping_" name="maps">
							<option value="">没有匹配，请选择...</option>
							<option value="">不需要导入这个字段</option>
							<option selected="selected" value="name">姓名</option>
							<option value="title">职位</option>
							<option value="company">公司名称</option>
							<option value="others">背景信息</option>
							<option value="address">地址</option>
							<optgroup label="IM">
								<option value="im_gtalk">IM - GTalk</option>
								<option value="im_msn">IM - MSN</option>
								<option value="im_qq">IM - QQ</option>
								<option value="im_other">IM - 其它</option>
							</optgroup>
							
							<optgroup label="电话">
								<option value="phone_office">电话 - 公司</option>
								<option value="phone_work">电话 - 工作</option>
								<option value="phone_home">电话 - 住宅</option>
								<option value="phone_mobile">电话 - 手机</option>
								<option value="phone_fax">电话 - 传真</option>
								<option value="phone_other">电话 - 其它</option>
							</optgroup>
							<optgroup label="网站">
								<option value="website_office">网站 - 公司</option>
								<option value="website_personal">网站 - 个人</option>
								<option value="website_other">网站 - 其它</option>
							</optgroup>
							<optgroup label="邮箱">
								<option value="email_work">邮箱 - 工作</option>
								<option value="email_personal">邮箱 - 个人</option>
								<option value="email_other">邮箱 - 其它</option>
							</optgroup>
						</select>
						</td>
						<td id="column_0">${str }</td>
					</tr>
					</c:forEach>
				
				</tbody>
				</table>
				<h4>
					<input name="adjust" value="true" type="hidden" id="adjust"/>
					<input id="header_checkbox" type="checkbox" value="1" onchange="adjust_size(this.checked)" name="ignore_header" checked="checked">
					导入时忽略第一行数据
					<script type="text/javascript">
						function adjust_size(obj){
							if(obj){
								$("#adjust").attr("value","true");
							}else{
								$("#adjust").attr("value","false");
							}
						}
					</script>
				</h4>
				<p style="margin-left:18px"> 如果你的CSV文件第一行是描述信息，请勾选这个选项，在导入时我们会自动把第一行忽略 </p>
				<div class="submit">
					<h4>完成导入</h4>
					<p>如果你确认这些数据匹配正确，请点击下面导入按钮，我们会把你CSV文件中的所有数据导入到系统中。</p>
					<p>
						<input class="btn btn-primary" type="submit" value="导入这些联系人" onclick="$('import_form').addClass('progress')" name="commit">
						<c:if test="${param.from == 'csv' }">
							<a class="btn" href="${basePath }/contact/import?from=csv">取消导入</a>
						</c:if>
						<c:if test="${param.from == 'xls' }">
							<a class="btn" href="${basePath }/contact/import?from=xls">取消导入</a>
						</c:if>
					</p>
				</div>
			</form>
		</div>
		</div>
		</div>
		
		
		<div class="span4 sidebar"> </div>
	</div>
</div>
	

</div>

</body></html>
